<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>椭圆</title>
</head>
<style>

    div {
        width: 100px;
        height: 100px;
        line-height: 100px;
        float: left;
        margin-right: 30px;
        text-align: center;
        background: rgba(0, 0,  0, .5)
    }
    .radius{
        border-radius:0% 100% 100% 0% /0% 50% 50% 0%;
        height: 200px;
    }
    .skew{
        position: relative;
        color: #fff;
    }
    .skew:before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content:"";
        transform:skew(45deg);
        background: #666;
        z-index: -1;
    }
    .diamond>img{
        -webkit-clip-path:polygon(50% 0,100% 50%,50% 100%, 0 50%);
        width: 100%;
        transition:.5s;
    }
    .diamond>img:hover{
        -webkit-clip-path:polygon(0% 0,100% 00%,100% 100%, 0 100%);
        width: 100%;
    }
    .corner{
        background: linear-gradient(135deg, transparent 15px, #ccc 0) top left,
        linear-gradient(225deg, transparent 15px ,#ccc 0) top right,
        linear-gradient(45deg, transparent 15px ,#ccc 0) bottom left,
        linear-gradient(-45deg, transparent 15px ,#ccc 0) bottom right;
        background-repeat: no-repeat;
        background-size:50% 50%;
    }
    .circle{
        background: radial-gradient(circle at top left, transparent 15px, #ccc 0) top left,
        radial-gradient(circle at top right, transparent 15px ,#ccc 0) top right,
        radial-gradient(circle at bottom left, transparent 15px ,#ccc 0) bottom left,
        radial-gradient(circle at bottom right  , transparent 15px ,#ccc 0) bottom right;
        background-repeat: no-repeat;
        background-size:50% 50%;
    }
    .trapezoid{
        position: relative;
        background: none;
    }
    .trapezoid:before{
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        transform:perspective(110px) rotateX(15deg) scaleY(1.3);
        transform-origin:bottom;
        background: #ccc;
        border-radius: 15px 15px 0  0;
        z-index: -1;

    }
    .pie{
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(90deg,transparent 50%,#655 00%);
        position: relative;
    }
    .pie:before{
        content:"";
        height: 100%;
        width: 50px;
        position: absolute;
        right: 0;
        background-color: inherit;
        border-radius:0 100% 100% 0/0 50% 50% 0;
        /*transform:rotate(.2turn);*/
        transform-origin:left center ;
        animation:pieMove 6s linear infinite,pieBg 12s step-end infinite;
    }
    @keyframes pieMove{
        to{
            transform:rotate(180deg);
        }
    }
    @keyframes pieBg{
        50%{
            background: #655;
        }
    }
    .piePaused:before{
        animation:pieMove 50s linear infinite,pieBg 100s step-end infinite;
        animation-play-state: paused;
        animation-delay:inherit;
    }
    svg{
        overflow: hidden;
        width: 80px;
        height: 80px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background: yellowgreen;
    }
    circle{
        fill: yellowgreen;
        stroke:#665;
        stroke-width:40px;
        stroke-dasharray:58 10;
    }
    .boxShadow{
        -webkit-box-shadow: 0px 10px 0px 0px black,
        0px -10px 0px 0px black;
        /*box-shadow:0px 10px 0px 0px black;*/
    }
    .dropShadow{
        background: none;
        border: 3px dashed #000;
        /*box-shadow:8px 8px 8px #65a;*/
        filter: drop-shadow(2px 2px 2px #65a);

    }
    .filter{
        background: red;
        transition:.5s;
    }
    .filter img{
        width: 100%;
        mix-blend-mode:luminosity;
    }
    .filter:hover{
        background-color: transparent;
    }
    .blur{
        background: url(http://p1.ifengimg.com/a/2016_50/76482654a16cd02.jpg) 0/ cover fixed;
        width: 400px;
        height: 400px;
        line-height: 20px;
        position: relative;
    }
    .blur main{
        width: 200px;
        /*height: 200px;*/
        margin:0 auto;
        position: absolute;
        top:50%;
        left: 50%;
        transform:translate(-50%,-50%);
        background: rgba(255,0,0,.6);
        overflow: hidden;
    }
    .blur main:before{
        content:"";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*background: rgba(255,255,255,.6);*/
        background: url(http://p1.ifengimg.com/a/2016_50/76482654a16cd02.jpg) 0/ contain fixed;
        filter:blur(90px);
        z-index: -1;
    }
    .angle{
        width: 200px;
        background:linear-gradient(-150deg, transparent 15px, greenyellow 0);
        position: relative;
    }
    .angle:before{
        content: '';
        top:0;
        right: 0;
        position: absolute;
        height: 30px;
        width: 17.34px;
        transform:translateY(-12.64px) rotate(-30deg);
        border-bottom-left-radius:5px;
        transform-origin:bottom right;
        box-shadow: -3px 3px 3px -2px rgba(0,0,0,.3);
        background:linear-gradient(to left bottom,transparent 15px ,yellowgreen 0)  no-repeat;

    }
</style>
<body>
<div class="radius">椭圆</div>
<div class="skew">矩形变换</div>
<div class="diamond"><img src="image/cat.jpg" alt=""> </div>
<div class="corner"> 四个切角 </div>
<div class="circle"> 内圆角 </div>
<div class="trapezoid">梯形3D变化</div>
<div class="pie" >饼图</div>
<div class="pie piePaused" style="animation-delay:-80s;">饼图静止</div>
<div class="svg">
    <svg>
        <circle r="20" cy="40" cx="40"></circle>
    </svg>
</div>
<div class="boxShadow">
    投影
</div>
<div class="dropShadow">
    不规则投影
</div>
<div class="filter">
    <!--<span>滤镜</span>-->
    <img src="image/cat.jpg" alt="">
</div>
<div class="blur">
    <main>
        在球场外，梅西和C罗的粉丝往往尖锐对立。但在球场内，这两大巨星虽然算不上好友，但至少保持着职业上的尊重。在昨天的国家德比中，梅西和C罗就联袂缔造了一个经典画面。
    </main>
</div>
<div class="angle">
    折角
</div>
</body>
</html>